<template>
	<view class="conbox">
		<view class="container">
			<cu-bar2 bgColor="bg-gradual-blue" :isBack="true"><block slot="content" class="page-name">轮盘抽奖</block></cu-bar2>
			<view class="contents">
				<!-- 背景 -->
				<image src="../../static/img/bg.png" class="cont" mode=""></image>
				<image src="../../static/img/caidai.png" class="caidai" mode=""></image>
				<view class="header">
					<view class="header-title">
						<view class="left">
							次数：
							<text style="color: #E4431A;">{{ chishu }}</text>
						</view>
						<view class="right" @click="getmyPrize">我的奖品 ></view>
					</view>
				</view>
				<view class="main">
					<view class="canvas-container">
						<view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
							<!-- <view :animation="animationData" class="canvas-content" id="zhuanpano"  :style="[{transform:'rotate('+runDeg+')'}]"> -->
							<!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
							<view class="canvas-line">
								<view class="canvas-litem" v-for="(item, index1) in awardsList" :key="index1" :style="[{ transform: 'rotate(' + item.lineTurn + ')' }]"></view>
							</view>

							<view class="canvas-list">
								<view class="canvas-item" :style="[{ zIndex: index2 }]" v-for="(iteml, index2) in awardsList" :key="index2">
									<view class="canvas-item-text" :style="[{ transform: 'rotate(' + iteml.turn + ')' }]">
										<text>{{ iteml.award }}</text>
										<image class="canvas-item-text-img" src="../../static/img/xiaolian.png" v-if="iteml.type == 3"></image>
										<image class="canvas-item-text-img" src="../../static/img/youhuiquan.png" v-if="iteml.type == 2"></image>
										<image class="canvas-item-text-img" src="../../static/img/jifenimg.png" v-if="iteml.type == 1"></image>
										<image class="canvas-item-text-img" src="../../static/img/jifenimg.png" v-if="iteml.type == 0"></image>
									</view>
								</view>
							</view>
						</view>

						<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始</view>
					</view>
				</view>
				<!-- 现金抽奖 -->
				<view class="typecheckbox">
					<view :class="mold == 1 ? 'left active' : 'left'" @click="choosetype(1)">幸运抽奖</view>
					<view :class="mold == 2 ? 'left active' : 'left'" @click="choosetype(2)">现金抽奖</view>
				</view>
				<!-- 规则 -->
				<view class="margin">
					<card-rule :datas="roles"></card-rule>
				</view>
				<!-- 我的奖品 -->
				<view class="shadowbox" v-if="r_flg" @click="closeshadow">
					<view class="myrewards" @click.stop="openshadow">
						<view class="title">我的奖品</view>
						<view class="itembox">
							<view class="item" v-for="(items, i) in myPrizelist" :key="i">
								<text class="left">{{ items.name }}</text>
								<text class="right">{{ items.createtime }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cardRule from '../../components/single/card/card_rule.vue'
export default {
	components:{
		cardRule
	},
	data() {
		return {
			roles:["用户每天登录即送1次抽奖机会，分享好友则多赠1次机会","用户获得的奖品，可在我的道具里查看","用户点击大转盘抽奖按钮，有积分和现金两种方式可参与抽奖，没抽一次消耗1次抽奖机会"],
			awardsConfig: {
				chance: true, //是否有抽奖机会
				lists: [] //奖品列表
			},
			awardsList: {},
			animationData: {},
			btnDisabled: '',
			thanksarr: [], //存储谢谢参与的索引
			chishu: 0,
			mold: 1,
			r_flg: 0,
			myPrizelist: [],
			listsdata: {
				lists: [
					{
						id: 4,
						mold: 1,
						type: 1,
						name: '积分1点',
						amount: '1.00',
						scale: '0.60',
						createtime: 1553651469
					}
				],
				luckdraw: 2
			},
			winningdata: {
				id: 5,
				mold: 1,
				type: 1,
				name: '积分2点',
				amount: 2,
				scale: '0.50',
				createtime: 1553651481
			},
			prizedata: {
				lists: [
					{
						id: 3,
						user_id: 3,
						name: "积分2点",
						number: 2,
						type: 1,
						createtime: 1553652319,
						mold: 1
					}
				],
				count: 1
			}
		};
	},
	onLoad: function() {
		// 获取奖品列表
		this.initdata(this);
	},
	onReady: function(e) {},
	methods: {
		// 查看奖品
		getmyPrize() {
			var that = this;
			var data = that.listsdata;
			data.lists.forEach(function(element, index) {
				element.createtime = that.dateformat(element.createtime);
			});
			that.myPrizelist = data.lists;

			that.r_flg = 1;
		},
		openshadow() {
			this.r_flg = 1;
		},
		closeshadow() {
			this.r_flg = 0;
		},
		// 选择抽奖方式
		choosetype(val) {
			this.mold = val;
			this.initdata(this);
		},
		// 初始化抽奖数据
		initdata: function(that) {
			var that = this;
			var data = that.listsdata;
			that.awardsConfig = data;
			that.chishu = data.luckdraw;
			// 获取奖品的个数
			let awarrlength = that.awardsConfig.lists.length;
			// push 谢谢参与奖项
			for (var i = 0; i <= 3 * 2; i++) {
				if (i % 3 == 0) {
					that.thanksarr.push(i);
					that.awardsConfig.lists.splice(i, 0, {
						name: '谢谢参与',
						type: 0
					});
				}
			}
			// 为每一项追加index属性
			that.awardsConfig.lists.forEach(function(element, index) {
				element.index = index;
			});

			// 画转盘
			that.drawAwardRoundel();
		},
		//画抽奖圆盘
		drawAwardRoundel: function() {
			// 拿到奖品列表
			var awards = this.awardsConfig.lists;
			var awardsList = [];
			// 每份奖品所占角度
			var turnNum = (1 / awards.length) * 360; // 文字旋转 turn 值
			// 奖项列表
			for (var i = 0; i < awards.length; i++) {
				awardsList.push({
					turn: i * turnNum + 'deg', //每个奖品块旋转的角度
					lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
					award: awards[i].name, //奖品的名字,
					type: awards[i].type,
					id: awards[i].type
				});
			}
			this.btnDisabled = this.chishu ? '' : 'disabled';
			this.awardsList = awardsList;
		},
		//发起抽奖
		playReward: function() {
			var that = this;

			// that.runDeg = 60*Math.random()
			if (this.chishu == 0) {
				uni.showToast({
					title: '抽奖次数已经用完',
					icon: 'none'
				});
				return;
			}
			var data = this.prizedata;

			var awardIndex = 3;
			that.awardsList.forEach(function(element, index) {
				if (element.award == data.name) {
					awardIndex = index;
				}
			});
			//中奖index
			var awardsNum = that.awardsConfig.lists;
			// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
			var runNum = 4; //旋转8周
			var duration = 4000; //时长

			// 旋转角度
			that.runDeg = that.runDeg || 0;
			let preDeg = that.runDeg;
			that.runDeg = that.runDeg + (360 - (that.runDeg % 360)) + (360 * runNum - awardIndex * (360 / awardsNum.length)) + 1;
			//创建动画
			if (process.env.VUE_APP_PLATFORM == 'h5') {
				// document.styleSheets[0]
				document.getElementById('zhuanpano').style = 'animation:rotate_before 4s 0ms ease forwards;';
				if (document.styleSheets[0].cssRules.length > 0) {
					Array.from(document.styleSheets[0].cssRules).forEach(function(element, index) {
						if (element.name == 'rotate_before') {
							// 删除上次插入的动画
							document.styleSheets[0].deleteRule(index);
						}
					});
				}

				// console.log(document.styleSheets[0].cssRules)
				// console.log("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}")
				// 插入定义的动画
				document.styleSheets[0].insertRule('@keyframes rotate_before{from{ transform: rotate(' + preDeg + 'deg); }to{ transform: rotate(' + that.runDeg + 'deg);}}', 8);
			} else {
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				});
				animationRun.rotate(that.runDeg).step();
				that.animationData = animationRun.export();
			}
			// 					// #ifndef H5
			// 					console.log(document.styleSheets)
			// 					document.getElementById('zhuanpano')
			// 					// #endif
			that.btnDisabled = 'disabled';

			// 中奖提示
			var awardsConfig = that.awardsConfig;
			var awardType = awardsConfig.lists[awardIndex].type;
			that.chishu = that.chishu - 1;
			if (awardType != 0) {
				setTimeout(
					function() {
						uni.showModal({
							title: '恭喜',
							content: '获得' + awardsConfig.lists[awardIndex].name,
							showCancel: false,
							success: function() {
								// 置空style  否则动画不生效
								setTimeout(function() {
									document.getElementById('zhuanpano').style = '';
								}, 1000);
							}
						});
						that.btnDisabled = '';
					}.bind(that),
					duration
				);
			} else {
				setTimeout(
					function() {
						uni.showModal({
							title: '很遗憾',
							content: '没中奖 ' + awardsConfig.lists[awardIndex].name,
							showCancel: false,
							success: function() {
								// 置空style  否则动画不生效
								// setTimeout(function() {
								// 	document.getElementById('zhuanpano').style = '';
								// }, 1000);
							}
						});
						that.btnDisabled = '';
					}.bind(that),
					duration
				);
			}
		}
	}
};
</script>
<style scoped>
.conbox {
	width: 750upx;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
}

.container,
image.cont {
	width: 750upx;
	min-height: 100vh;
	height: auto;
	position: relative;
}

image.cont {
	height: 100%;
	position: absolute;
	z-index: 0;
}

image.caidai {
	position: absolute;
	top: 0;
	left: 0;
	width: 750upx;
	height: 1024upx;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* height: 246upx; */
	padding-top: 48upx;
	padding-bottom: 40upx;
	box-sizing: border-box;
	position: relative;
	z-index: 3;
}

.header-title {
	width: 100%;
	height: 60upx;
	display: flex;
	align-items: center;
	padding: 0 48upx;
	box-sizing: border-box;
	justify-content: space-between;
}

.header-title > view {
	padding: 8upx 16upx;
	border: 1px solid #d89720;
	color: #d89720;
	font-size: 28upx;
	border-radius: 26upx;
}

/* 转盘 */
.canvas-container {
	margin: 0 auto;
	position: relative;
	width: 600upx;
	height: 600upx;
	background: url(../../static/img/circle.png) no-repeat;
	background-size: cover;
	border-radius: 50%;
}

.canvas {
	width: 100%;
	height: 100%;
	display: block !important;
	border-radius: 50%;
}

.canvas-content {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: block;
	width: 600upx;
	height: 600upx;
	border-radius: inherit;
	/* background-clip: padding-box; */
	/* background-color: #ffcb3f; */
}

.canvas-element {
	position: relative;
	z-index: 1;
	width: inherit;
	height: inherit;
	border-radius: 50%;
}

.canvas-list {
	position: absolute;
	left: 0;
	top: 0;
	width: inherit;
	height: inherit;
	z-index: 9999;
}

.canvas-item {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #e4370e;
	/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
}

.canvas-item-text {
	position: relative;
	display: block;
	padding-top: 46upx;
	margin: 0 auto;
	text-align: center;
	-webkit-transform-origin: 50% 300upx;
	transform-origin: 50% 300upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fb778b;
}

.canvas-item-text text {
	font-size: 30upx;
}

.canvas-item-text-img {
	width: 50upx;
	height: 50upx;
	padding-top: 30upx;
}

/* 分隔线 */
.canvas-line {
	position: absolute;
	left: 0;
	top: 0;
	width: inherit;
	height: inherit;
	z-index: 99;
}

.canvas-litem {
	position: absolute;
	left: 300upx;
	top: 0;
	width: 3upx;
	height: 300upx;
	background-color: rgba(228, 55, 14, 0.4);
	overflow: hidden;
	-webkit-transform-origin: 50% 300upx;
	transform-origin: 50% 300upx;
}

/**  
* 抽奖按钮  
*/
.canvas-btn {
	position: absolute;
	left: 260upx;
	top: 260upx;
	z-index: 400;
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	color: #f4e9cc;
	background-color: #e44025;
	line-height: 80upx;
	text-align: center;
	font-size: 26upx;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
	text-decoration: none;
}

.canvas-btn::after {
	position: absolute;
	display: block;
	content: ' ';
	left: 12upx;
	top: -44upx;
	width: 0;
	height: 0;
	overflow: hidden;
	border-width: 30upx;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #e44025;
}

.canvas-btn.disabled {
	pointer-events: none;
	background: #b07a7b;
	color: #ccc;
}

.canvas-btn.disabled::after {
	border-bottom-color: #b07a7b;
}

.canvas-btn-table {
	color: #a83fdb;
	width: 120upx;
	text-align: center;
	position: absolute;
	left: 240upx;
	top: 360upx;
	font-size: 26upx;
	background-color: #ffffff;
	opacity: 0.9;
}

.typecheckbox {
	width: 100%;
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	padding: 20upx;
	box-sizing: border-box;
	color: #fff;
	font-size: 28upx;
	top: -120upx;
	flex-direction: column;
	height: 180upx;
	align-items: flex-end;
	/* padding-top: 46upx; */
}

.typecheckbox view {
	border: 1px solid #ff3637;
	background: transparent;
	color: #ff3637;
	display: flex;
	height: 60upx;
	width: 140upx;
	border-radius: 50upx;
	align-items: center;
	justify-content: center;
	display: flex;
	margin-left: 20upx;
}

.typecheckbox view.active {
	background: #ff3637;
	color: #fff;
}

.guize {
	width: 502upx;
	min-height: 300upx;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 3;
	background-image: linear-gradient(-180deg, #f48549 0%, #f2642e 100%);
	border: 18upx solid #e4431a;
	border-radius: 16px;
	margin: 0 auto;
	margin-top: -104upx;
	padding: 48upx;
	/* box-sizing: border-box; */
	color: #fff;
}

.guize .title {
	text-align: center;
	margin-bottom: 28upx;
}

.guize .g_item {
	font-family: PingFang-SC-Medium;
	font-size: 24upx;
	color: #ffffff;
	letter-spacing: 0.5px;
	text-align: justify;
	line-height: 20px;
}

.shadowbox {
	width: 750upx;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
}

.myrewards {
	width: 600upx;
	min-height: 80upx;
	background: #ffeedf;
	border: 10upx solid #f2692f;
	color: #333;
	font-size: 24upx;
	font-family: PingFang-SC-Medium;
	border-radius: 40upx;
	padding-bottom: 20upx;
}

.myrewards .title {
	font-family: PingFang-SC-Bold;
	font-size: 16px;
	color: #e4431a;
	letter-spacing: 0.57px;
	display: flex;
	padding-top: 36upx;
	justify-content: center;
}

.myrewards .itembox {
	max-height: 320upx;
	overflow-y: auto;
}

.myrewards .item {
	width: 100%;
	height: 66upx;
	padding: 0 32upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
